<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>显示模式</title>
		<link href="new_file.css" rel="stylesheet"/>
	</head>
	<body>
		<!-- 元素的显示：
		1.块元素block
		 单独占一行
		 默认的宽度和父级元素宽度的100%
		 可以控制width height 对齐属性
		 块元素内可以包含行内元素或其他块元素
		 div，ul，ol，li，p，h1-h6
		2.行内元素inline
		一行显示三个
		默认的宽度就是内容的宽度,
		宽高属性无效
		 不能设置对齐属性
		 行内元素只包含文本或其他行内元素
		 常见的行内元素<a><span><del><strong>
		 3.行内块元素inline-block
		 一行显示多个，但两个元素之间有空白间隙
		 默认宽度是内容本身的宽度
		 可以给盒子设置宽高
		 input，img，td
		 元素模式的转换：display+模式名称-->
		<div class="box">hello box</div>
		<p class="box">hello 段落</p>
		<h1>一级标题</h1>
		<span class="box">hello span</span>
		<del>hello 删除线</del>
	</body>
</html>
css部分
div{
	background-color: aquamarine;
	display:inline
}
span{
	background-color: aqua;
	display: inline-block;
}
.box{
	width: 200px;
	height: 150px;
	border: 1px solid aquamarine;
	text-align: center;
	margin: auto;
}